.cube-container {
  perspective: 1000px;
  margin: 100px;
}

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s;
}

.cube-face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid #333;
  background: rgba(255, 255, 255, 0.8);
}

.front  { transform: translateZ(100px); background: #ff0000; }
.back   { transform: translateZ(-100px) rotateY(180deg); background: #00ff00; }
.right  { transform: translateX(100px) rotateY(90deg); background: #0000ff; }
.left   { transform: translateX(-100px) rotateY(-90deg); background: #ffff00; }
.top    { transform: translateY(-100px) rotateX(90deg); background: #ffffff; }
.bottom { transform: translateY(100px) rotateX(-90deg); background: #ffa500; }